<template>
  <div class="settings-container">
    <!-- 页面标题 -->
    <div class="settings-header">
      <div class="settings-title">设置</div>
    </div>
    
    <!-- 选项卡 -->
    <div class="settings-tabs">
      <div 
        class="settings-tab" 
        :class="{ active: activeTab === 'system' }"
        @click="setActiveTab('system')"
      >
        系统设置
      </div>
      <div 
        class="settings-tab" 
        :class="{ active: activeTab === 'account' }"
        @click="setActiveTab('account')"
      >
        账户设置
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="settings-content">
      <!-- 账户设置内容 -->
      <div v-if="activeTab === 'account'" class="settings-section">
    
        
        <!-- 头像设置 -->
        <div class="setting-item">
          <div class="setting-label">头像</div>
          <div class="setting-value">
            <div class="avatar-container">
              <div class="avatar">
                <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="头像">
                <span v-else class="avatar-icon">👤</span>
              </div>
              <div class="avatar-actions">
                <button class="btn btn-primary" @click="openAvatarModal">更换头像</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 账号设置 -->
        <div class="setting-item">
          <div class="setting-label">账号</div>
          <div class="setting-value">
            <span class="account-info">{{ userInfo.account }}</span>
          </div>
        </div>
        
        <!-- 密码设置 -->
        <div class="setting-item">
          <div class="setting-label">密码</div>
          <div class="setting-value">
            <span class="password-mask">{{ userInfo.password }}</span>
            <button class="btn btn-text" @click="openPasswordModal">修改</button>
          </div>
        </div>
      </div>
      
      <!-- 系统设置内容 -->
      <div v-if="activeTab === 'system'" class="settings-section">
        <div class="section-title">系统配置</div>
        <h2>预算估计</h2>
      </div>
    </div>
    
    <!-- 头像上传模态框 -->
    <div v-if="avatarModalVisible" class="modal-overlay" @click.self="closeAvatarModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">更换头像</div>
          <button class="modal-close" @click="closeAvatarModal">×</button>
        </div>
        <div class="modal-body">
          <div class="avatar-upload">
            <div class="avatar-preview">
              <img v-if="avatarForm.previewUrl" :src="avatarForm.previewUrl" alt="头像预览">
              <span v-else class="avatar-icon">👤</span>
            </div>
            <label class="upload-btn">
              <input 
                type="file" 
                accept="image/*" 
                style="display: none" 
                @change="handleAvatarUpload"
              >
              选择图片
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="closeAvatarModal">取消</button>
          <button class="btn btn-primary" @click="saveAvatar">保存</button>
        </div>
      </div>
    </div>
    
    <!-- 密码修改模态框 -->
    <div v-if="passwordModalVisible" class="modal-overlay" @click.self="closePasswordModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">修改密码</div>
          <button class="modal-close" @click="closePasswordModal">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">当前密码</label>
            <input 
              type="password" 
              class="form-input" 
              v-model="passwordForm.currentPassword" 
              placeholder="请输入当前密码"
            >
          </div>
          <div class="form-group">
            <label class="form-label">新密码</label>
            <input 
              type="password" 
              class="form-input" 
              v-model="passwordForm.newPassword" 
              placeholder="请输入新密码"
            >
          </div>
          <div class="form-group">
            <label class="form-label">确认新密码</label>
            <input 
              type="password" 
              class="form-input" 
              v-model="passwordForm.confirmPassword" 
              placeholder="请再次输入新密码"
            >
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="closePasswordModal">取消</button>
          <button class="btn btn-primary" @click="savePassword">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 当前激活的选项卡
const activeTab = ref('system');

// 用户信息
const userInfo = reactive({
  avatar: '',
  account: '123456',
  password: '******'
});

// 模态框显示状态
const avatarModalVisible = ref(false);
const passwordModalVisible = ref(false);

// 表单数据
const avatarForm = reactive({
  file: null,
  previewUrl: ''
});

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 切换选项卡
const setActiveTab = (tab) => {
  activeTab.value = tab;
};

// 打开头像上传模态框
const openAvatarModal = () => {
  avatarModalVisible.value = true;
  avatarForm.previewUrl = userInfo.avatar;
};

// 打开密码修改模态框
const openPasswordModal = () => {
  passwordModalVisible.value = true;
  // 重置表单
  passwordForm.currentPassword = '';
  passwordForm.newPassword = '';
  passwordForm.confirmPassword = '';
};

// 关闭模态框
const closeAvatarModal = () => {
  avatarModalVisible.value = false;
  avatarForm.file = null;
  avatarForm.previewUrl = '';
};

const closePasswordModal = () => {
  passwordModalVisible.value = false;
};

// 处理头像文件选择
const handleAvatarUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    avatarForm.file = file;
    const reader = new FileReader();
    reader.onload = (e) => {
      avatarForm.previewUrl = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 保存头像
const saveAvatar = () => {
  if (avatarForm.previewUrl) {
    userInfo.avatar = avatarForm.previewUrl;
    ElMessage.success('头像更新成功');
    closeAvatarModal();
  } else {
    ElMessage.error('请选择头像图片');
  }
};

// 保存密码
const savePassword = () => {
  if (!passwordForm.currentPassword) {
    ElMessage.error('请输入当前密码');
    return;
  }
  
  if (!passwordForm.newPassword) {
    ElMessage.error('请输入新密码');
    return;
  }
  
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致');
    return;
  }
  
  // 模拟密码修改成功
  ElMessage.success('密码修改成功');
  closePasswordModal();
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.settings-container {
  width: 100%; /* 改用width而不是max-width */
  margin: 0; /* 移除居中对齐的margin */
  background: white;
  border-radius: 0; /* 移除圆角 */
  box-shadow: none; /* 移除阴影效果 */
  overflow: hidden;
}

.settings-header {
  padding: 20px 30px;
  border-bottom: 1px solid #ebeef5;
}

.settings-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.settings-subtitle {
  font-size: 14px;
  color: #909399;
}

.settings-tabs {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.settings-tab {
  padding: 15px 30px;
  font-size: 16px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.settings-tab.active {
  color: #409eff;
  font-weight: 500;
}

.settings-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409eff;
}

.settings-content {
  padding: 30px;
}

.settings-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.setting-label {
  width: 120px;
  font-size: 14px;
  color: #606266;
  text-align: right;
  padding-right: 20px;
}

.setting-value {
  flex: 1;
  display: flex;
  align-items: center;
}

.avatar-container {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #e4e7ed;
}

.avatar-icon {
  font-size: 40px;
  color: #c0c4cc;
}

.avatar-actions {
  margin-left: 20px;
}

.account-info {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.password-mask {
  font-size: 16px;
  color: #303133;
  letter-spacing: 2px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover {
  background: #66b1ff;
}

.btn-text {
  background: transparent;
  color: #409eff;
}

.btn-text:hover {
  background: #ecf5ff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px dashed #c0c4cc;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-btn:hover {
  border-color: #409eff;
  color: #409eff;
}
</style>